<template>
  <view class="order-operation" v-if="currentOrder">
    <view class="item" v-if="currentOrder.status === '待付款'">
      <button class="button" plain="true" v-if="!currentOrder.is_closed" @click="closeOrder">取消</button>
      <button class="button-yes" plain="true" @tap="payOrderAgain(currentOrder.id,currentOrder)">去付款</button>
    </view>
    <view class="item" v-else-if="currentOrder.status === '待发货'">
      <button class="button" plain="true" @click="goToOrderShow">查看详情</button>
      <button v-if="statusIndex==5" class="button" plain="true" @click="applyAftersales">售后</button>
    </view>
    <view class="item" v-else-if="currentOrder.status === '已发货'">
      <button class="button" plain="true" @click="checkExpress">查看物流</button>
      <button class="button-yes" plain="true" @click="receivOrder">确认收货</button>
      <button v-if="statusIndex==5" class="button" plain="true" @click="applyAftersales">售后</button>
    </view>
    <view class="item" v-else-if="currentOrder.delivery_status === 'received'">
      <button class="button" plain="true" @click="checkExpress">查看物流</button>
      <button class="button-yes" plain="true" v-if="currentOrder.status === '已收货'" @click="commentOrder">评价</button>
      <button v-if="statusIndex==5" class="button" plain="true" @click="applyAftersales">售后</button>
    </view>
		<view class="msg-pop">
			<uni-popup ref="msgpopup" type="center">
				<view class="popbgmsg-box" @click="close()">
					<image src="/static/images/common/popbgmsg.png" class="popbgmsg" mode=""></image>
					<view class="pop-content">2022年1月28日至2月15日春节放假、快递停发，平台暂不支持购买商品和购买会员。</view>
				</view>
			</uni-popup>
		</view>
  </view>
</template>

<script>
import { closeOrder, cancelOrder, receiveOrder } from "api/orderApi"
import { payOrderByWxmini,payOrderByAdapayWxmini } from "api/paymentApi"
import { wxpay } from "helpers/paymentHelper"
import store from 'store'
import { mapGetters,mapActions } from 'vuex'

export default {
	store,
  name: "OrderOperationCom",
  props: {
    order: {
      type: Object,
      required: true
    },
	defaultIndex: {
	  type: Number,
	  default: 0
	}
  },
  data: () => ({
    currentOrder: null,
	statusIndex:0
  }),
	computed: {
		...mapGetters([
			'user',
			'isLogin',
			'hasAttribute',
			'selectedSku'
		])
	},
  watch: {
    order: {
      handler(val) {
        this.currentOrder = val
      },
      immediate: true
    },
	defaultIndex: {
	  handler(val) {
	    this.statusIndex = val
		
	  },
	  
	  immediate: true
	}
  },
  methods: {
		async payOrderAgain(orderId,currentOrder){
			// uni.navigateTo({url: '/packs/pages/download/download'})
			// const payload = await payOrderByAdapayWxmini(orderId)
			// await wxpay(payload.result, 'order')
			let record = [];
			currentOrder.items.forEach((value, index) => {
			   let item = {};
			   item.number = value.amount;
			   item.sku = value.sku; 
			   item.product = {
				   'title':value.product_title,
				   
			   };
			    record[index] = item;
			})
			
			let res = encodeURIComponent(JSON.stringify(record));
			
			uni.navigateTo({
				url: `/packs/pages/order/confirm?records=` + res +`&order_id=`+currentOrder.id
			})
		},
    async closeOrder() {
      uni.showModal({
        title: '提示',
        content: '确定关闭当前订单吗？',
        success: async (res) => {
          if (res.confirm) {
            this.currentOrder = await closeOrder(this.currentOrder.id)
            uni.showToast({title: '订单关闭成功', duration: 2000, icon: 'success'})
          }
        }
      })
    },
    async cancelOrder() {
      uni.showModal({
        title: '提示',
        content: '确定取消当前订单吗？',
        success: async (res) => {
          if (res.confirm) {
            this.currentOrder = await cancelOrder(this.currentOrder.id)
            uni.showToast({title: '订单取消成功', duration: 2000, icon: 'success'})
          }
        }
      })
    },
    async checkExpress() {
      uni.navigateTo({url: `/packs/pages/order/express?id=${this.currentOrder.id}`})
    },
    async receivOrder() {
      this.currentOrder = await receiveOrder(this.currentOrder.id)
      uni.showToast({title: '确认收货成功', duration: 2000, icon: 'success'})
    },
    async commentOrder() {
      uni.navigateTo({url: `/packs/pages/order/comments?id=${this.currentOrder.id}`})
    },
    async applyAftersales() {
      uni.navigateTo({url: `/packs/pages/order/aftersales?id=${this.currentOrder.id}`})
    },
	async goToOrderShow() {
	  uni.navigateTo({url: `/packs/pages/order/show?id=${this.currentOrder.id}`})
	},
    goToMine() {
      uni.switchTab({url: `/pages/mine/mine`})
    },
		showmsg() {
			this.$refs.msgpopup.open('center')
		},
		close() {
			this.$refs.msgpopup.close()
		}
  }
}
</script>

<style lang="scss" scoped>
	.order-operation {
		display: flex;
		justify-content: flex-end;
		margin-top: 20rpx;
		float:right;
		margin-right:24rpx;
		.item {
			display: flex;
			justify-content: flex-end;
			.button {
				height: 52rpx;
				line-height: 50rpx;
				border: 1px #999 solid;
				border-radius: 1rpx;
				background-color: #FFFFFF;
				font-size: 26rpx;
				margin-left: 10rpx;
			}
			.button-yes{
				height: 52rpx;
				line-height: 50rpx;
				border: 1px #D84C29 solid;
				border-radius: 1rpx;
				background-color: #D84C29;
				font-size: 26rpx;
				margin-left: 10rpx;
				color:#fff;
				
			}
		}
	}
	.popbgmsg-box {
			width: 560rpx;
			height: 980rpx;
			margin-top: 50rpx;
			position: relative;
	}
	.popbgmsg {
		display: block;
		width: 560rpx;
		height: 980rpx;
	}
	.pop-content {
		width: 354rpx;
		max-height: 260rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 6;
		line-clamp: 6;
		-webkit-box-orient: vertical;
		position: absolute;
		left: 104rpx;
		top: 344rpx;
		top:400rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #A73501;
		line-height: 40rpx;
	}
</style>
